<template>
    <div>
        <el-button type="success" @click="isShowDialog('insert')" icon="el-icon-plus">新增</el-button>
        <el-input placeholder="请输入基础物料名" v-model="keywords" class="inputSuffix">
            <el-button slot="append" type="primary" icon="el-icon-search" class="searchBtn" @click="searchBtn"></el-button>
        </el-input>
        <!-- 查询 -->
        <!-- 搜索 -->
        <!-- 表格 -->
        <el-table :data="tabaleData" :highlight-current-row="true" stripe border class="table-index"  style="width: 100%;" :height="tableHeight"
        :header-cell-style="getRowClass" v-loading="loading">
            <el-table-column fixed type="index" label="*" sortable  min-width="40"></el-table-column>
            <el-table-column prop="name" label="名称"  sortable min-width="100"></el-table-column>
            <el-table-column prop="code" label="编码"  sortable show-overflow-tooltip min-width="160"></el-table-column>
            <el-table-column prop="type" label="型号" sortable min-width="85"></el-table-column>
            <el-table-column prop="texture" label="材质" sortable  min-width="120"></el-table-column>
            <el-table-column prop="no" label="损耗系数" sortable  min-width="90"></el-table-column>
            <el-table-column prop="managerLevel" label="管理等级"  sortable min-width="90"></el-table-column>
            <el-table-column prop="enable" label="启用" sortable width="90">
                <template slot-scope="scope">
                    <span :class="scope.row.enable===1?'el-icon-circle-check cl-success':'el-icon-error cl-danger'" class="icon-circle"></span>
                </template>
            </el-table-column>
            <el-table-column prop="remaining" label="计划剩余量"  sortable min-width="90"></el-table-column>

            <el-table-column prop="creatorName" label="创建人"  sortable min-width="90"></el-table-column>
             <el-table-column prop="createTime" label="创建时间" sortable  min-width="90"></el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="100">
                <template slot-scope="scope">
                    <el-button @click="isShowDialog('update',scope.row)" type="text" size="mini">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
         <!-- 基础信息编辑 -->

        <el-dialog :title="dialog.title" width="800px" center :visible.sync="dialog.isShow" :close-on-click-modal="false" v-dialogDrag>
             <el-form :inline="true" class="demo-form-inline" label-position="right" label-width="150px" :model="dialog.formDate">
                <el-form-item label="bom名称">
                    <el-input v-model="dialog.formDate.name"></el-input>
                </el-form-item>
                <el-form-item label="物料编码">
                    <el-input v-model="dialog.formDate.code"></el-input>
                </el-form-item>
                <el-form-item label="物料型号">
                    <el-input v-model="dialog.formDate.type"></el-input>
                </el-form-item>
                <el-form-item label="材质">
                    <el-input v-model="dialog.formDate.texture"></el-input>
                </el-form-item>
                <el-form-item label="损耗系数">
                    <el-input v-model="dialog.formDate.no"></el-input>
                </el-form-item>
                <el-form-item label=" 管理等级">
                    <el-select v-model="dialog.formDate.managerLevel" class="inputSuffix">
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                        <el-option label="3" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-switch class="inputSuffix"  v-model="dialog.formDate.enable" active-text="启用" inactive-text="禁用" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
                <el-form-item label="创建人" v-if="dialog.title.indexOf('编辑')>-1">
                    <el-input v-model="dialog.formDate.creatorName" disabled></el-input>
                </el-form-item>
                <el-form-item label="创建时间" v-if="dialog.title.indexOf('编辑')>-1">
                    <el-input v-model="dialog.formDate.createTime" disabled></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="submitList" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import cgbHttp from '@/axios/cgbHttp.js'
export default {
    data(){
        return {
            tableHeight: document.documentElement.clientHeight - 170,/**表格高度 */
            loading:false,/**加载参数 */
            tabaleData:[],/**表格数据列表 */
            tableDialogHeightTabPane:{/**dialog style */
                height: (document.documentElement.clientHeight - 300) + 'px',
                overflowY: 'auto'
            },
            keywords:'',
            pagination:{/**分页 */
                pageSize:10,
                currentPage:1,
                total:0
            },
            dialog:{
                title:'',
                isShow:false,
                formDate:{
                }
            },
            mType:''
        }
    },
    created(){
        let  self = this;
        self.mType=  3 ; // 口罩物料3标识
        self.getTableList()
    },
    methods:{
        getTableList(){
            let self = this,
            data={
               currentPage:self.pagination.currentPage,
               pageSize:self.pagination.pageSize,
               name:self.keywords,
               type:self.mType
            };
            cgbHttp.cgMaterialList(data).then(res=>{
                self.tabaleData=res.content.records
                self.pagination.total = res.content.total;
            })
        },
        searchBtn(){
            this.pagination.currentPage=1;
            this.getTableList();
        },
        handleSizeChange(size){
            this.pagination.pageSize = size;
            this.getTableList();
        },
        handleCurrentChange(current){
            this.pagination.currentPage = current;
            this.getTableList();
        },
        isShowDialog(type,row){
            let self = this;
            self.dialog.title = type==='insert'?'新增':'编辑';
            self.dialog.isShow = true;
            self.dialog.formDate= type==='insert'?{
                mType:self.mType
            }:row;
        },
        submitList(){
            let self = this;
            let type = self.dialog.title.indexOf("新增") > -1 ? "insert" : "update";
            cgbHttp.addUpdateMaterial(type, self.dialog.formDate).then(res => {
                self.$message.success(`${self.dialog.title}成功`);
                self.dialog.isShow = false;
                self.getTableList();
            },error => {
                self.$message.error(`${self.dialog.title}失败`);
            });
        }
    }
}
</script>
<style scoped>
.icon-circle{
    line-height: 100%;
    font-size:18px;
}
</style>
